<style>
.box3 {width: 100px;
height: 100px;
background-color: aqua;}

.box2{width: 200px;
height: 200px;
background-color: rgb(219, 155, 16);}

.box1{width: 300px;
height: 300px;
background-color: rgb(27, 14, 212);}
</style>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
</body>
<script>
var obox1 = document.getElementsByClassName('box1')[0]
var obox2 = document.getElementsByClassName('box2')[0]
var obox3 = document.getElementsByClassName('box3')[0]
  

//    obox1.onclick = function(){
//     alert('box1')
// }
//    obox2.onclick = function(){
//     alert('box2')
// }
//    obox3.onclick = function(){
//     alert('box3')
// }


//默认冒泡
//第三个值是布尔值
//true 捕获
//false 冒泡
// obox1.addEventListener('click',function(){

//  alert('捕获的obox1')},true)

// obox2.addEventListener('click',function(){

//  alert('捕获的obox2')},true)

// obox3.addEventListener('click',function(){

//  alert('捕获的obox3')},true)



 
//  obox1.addEventListener('click',function(){
 
//   alert('冒泡的obox1')},false)
 
//  obox2.addEventListener('click',function(){
 
//   alert('冒泡的obox2')},false)
 
//  obox3.addEventListener('click',function(){
 
//   alert('冒泡的obox3')},false)

 obox1.onclick= function(eve){
    var e = eve|| window.event;
    e.stopPropagation()
    alert('obox1')
 }
 obox2.onclick = function(eve){
    var e = eve || window.event;
    e.stopPropagation()
    alert('obox2')
 }
obox3.onclick = function(eve){
    var e = eve|| window.event;
    e.stopPropagation()
    alert('box3')
}


</script>